<template>
  <div :id="echarts" :style="getheight"></div>
</template>
<script>
require("echarts-wordcloud");
export default {
  name: 'cloudWord',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 150
    },
    color: {
      type: Array,
      default: () => [
        '#1890FF',
        '#36CBCB',
        '#4ECB73',
        '#FBD437',
        '#F2637B',
        '#975FE5'
      ]
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      option: {
        grid: {
          top: '4%',
          left: '2%',
          right: '4%',
          bottom: '0%'
        },
        series: 
          {
         type: 'wordCloud',
          gridSize: 1,
          sizeRange: [12, 50],
          rotationRange: [-90, 90],
          rotationStep: 45,
          shape: 'diamond',
          width: '90%',
          textPadding: 0,
          autoSize: {
            enable: true,
            minSize: 6
          },

          data: []
        }
        
      },
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )
      this.option.series.textStyle ={
            normal: {
              color: () => {
                let index = Math.floor(Math.random() * this.color.length)
                return this.color[index]
              }
            },
            emphasis: {
              fontSize: 20
            }
          },
      this.option.series.data = this.chartData
      chartFactor.setOption(this.option)
    },
 
  }
}
</script>
